/* eslint-disable no-unused-vars */
import React from 'react';
import { connect } from 'react-redux';
import { Link, RouteComponentProps } from 'react-router-dom';
import actions from '@/store/actions/profile';
import { CombinedState } from '@/store/reducers';
import { ProfileState } from '@/store/reducers/profile';
import {
 Form, Input, Button, message
} from "antd";
import { UserAddOutlined, LockOutlined, MailOutlined } from "@ant-design/icons";
import NavHeader from '@/components/NavHeader';
import './index.scss';

const mapStateToProps = (state: CombinedState): ProfileState => state.profile;
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;
interface Params{}
type Props = RouteComponentProps<Params> & StateProps & DispatchProps;

function Login(props: Props) {
    const onFinish = (value: any) => {
        props.login(value);
    };
    const onFinishFailed = (errorInfo: any) => {
        message.error(`表单验证失败! ${errorInfo}`);
    };
    return (
      <>
        <NavHeader history={props.history}>用户登录</NavHeader>
        <Form onFinish={onFinish} onFinishFailed={onFinishFailed} className="login-form">
          <Form.Item label="用户名" name="username" rules={[{ required: true, message: "请输入你的用户名！" }]}>
            <Input prefix={<UserAddOutlined />} placeholder="用户名" />
          </Form.Item>
          <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入你的密码！" }]}>
            <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
            <Link to="/register">立刻注册!</Link>
          </Form.Item>
        </Form>
      </>
      );
}

export default connect(
    mapStateToProps,
    actions
)(Login);
